<template>
	<view>
		<view class="header acea-row row-between-wrapper">
			<view>
				当前共 <text class='num' style="color: red;">{{ totals }}</text> 条记录
			</view>
			<view class="manage" @click="toggleManage">{{ managing ? '取消' : '管理' }}</view>
		</view>
		<view class="records" v-if="browseList.length">
			<view class="record-list">
				<view class="record-item acea-row row-between-wrapper" v-for="(item, index) in browseList" :key="index">
					<view class="item-content">
						<view class="item-time">{{ item.time }}</view>
						<view class="item-grid">
							<view class="item-block" v-for="(product, pIndex) in item.products" :key="pIndex"
								@click="goToDetail(product)">
								<image :src="product.img" mode="aspectFill"></image>
								<view class="price">￥{{ product.price }}</view>
								<checkbox v-if="managing" class="item-block checkbox" :value="item.id" :checked="isAllSelected" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer acea-row row-between-wrapper" v-if="managing">
				<view>
					<checkbox-group @change="toggleAll">
						<checkbox value="all" :checked="isAllSelected" />
						<text class='checkAll'>全选</text>
					</checkbox-group>
				</view>
				<view class="button">
					<button class="btn" @click="deleteSelected">删除记录</button>
				</view>
			</view>
		</view>
		<view class="no-records" v-else>
			暂无浏览记录
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				managing: false,
				totals: 0,
				browseList: [
					// 示例数据
					{
						id: 1,
						time: '2024-10-26 17:16',
						products: [{
								id: 1,
								img: '../../../static/images/f.png',
								price: 199.99
							},
							{
								id: 2,
								img: '../../../static/images/f.png',
								price: 299.99
							},
							{
								id: 3,
								img: '../../../static/images/f.png',
								price: 399.99
							},{
								id: 4,
								img: '../../../static/images/f.png',
								price: 499.99
							},
						]
					},
					{
						id: 2,
						time: '2024-10-25 14:30',
						products: [{
								id: 4,
								img: '../../../static/images/f.png',
								price: 499.99
							},
							{
								id: 5,
								img: '../../../static/images/f.png',
								price: 599.99
							},
							{
								id: 6,
								img: '../../../static/images/f.png',
								price: 699.99
							}
						]
					}
				],
				selectedItems: []
			};
		},
		computed: {
			isAllSelected() {
				return this.browseList.length > 0 && this.selectedItems.length === this.browseList.length;
			}
		},
		methods: {
			toggleManage() {
				this.managing = !this.managing;
			},
			toggleItem(id) {
				if (this.selectedItems.includes(id)) {
					this.selectedItems = this.selectedItems.filter(item => item !== id);
				} else {
					this.selectedItems.push(id);
				}
			},
			toggleAll(event) {
				const checked = event.detail.value.length > 0;
				if (checked) {
					this.selectedItems = this.browseList.map(item => item.id);
				} else {
					this.selectedItems = [];
				}
			},
			deleteSelected() {
				if (this.selectedItems.length === 0) {
					this.$util.Tips({
						title: '请选择要删除的记录'
					});
					return;
				}
				this.browseList = this.browseList.filter(item => !this.selectedItems.includes(item.id));
				this.selectedItems = [];
				this.totals = this.browseList.length;
			},
			goToDetail(product) {
				// 跳转到商品详情页
				console.log('跳转到商品详情页:', product.id);
			}
		}
	};
</script>
<style scoped lang="scss">
	.header {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #282828;
		position: fixed;
		top: 0;
		z-index: 5;
		border-bottom: 1px solid #EEEEEE;
	}

	.manage {
		font-size: 28rpx;
		color: #282828;
	}

	.records {
		margin-top: 100rpx;
		padding: 20rpx;
	}

	.record-list {
		display: flex;
		flex-direction: column;
	}

	.record-item {
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 14rpx;
	}

	.item-content {
		width: 100%;
	}

	.item-time {
		font-size: 28rpx;
		font-weight: 600;
		color: #000;
		margin-bottom: 20rpx;
	}

	.item-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.item-block {
		width: 32%;
		height: 260rpx;
		margin: 1% 1% 1% 0;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.price {
			font-size: 28rpx;
			font-weight: 600;
			color: red;
		}
	}

	.item-block .checkbox {
		position: absolute;
		top: 4rpx;
		left: 4rpx;
	}

	.footer {
		z-index: 9;
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		position: fixed;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		border-bottom: 1px solid #EEEEEE;
		bottom: 0rpx;

		.checkAll {
			font-size: 28rpx;
			color: #282828;
			margin-left: 16rpx;
		}

		.button {
			.btn {
				font-size: 28rpx;
				color: #999;
				border-radius: 30rpx;
				border: 1px solid #999;
				width: 160rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}

	.no-records {
		text-align: center;
		font-size: 28rpx;
		color: #999;
		padding: 100rpx 0;
	}
</style>